<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>斑马表格</title>
    <style type="text/css">
        body {
            background: #EFEFEF none repeat scroll 0 0;
            color: #000000;
            font-family: Helvetica, Arial, sans-serif;
            text-align: center;
        }

        #page {
            background: #FFFFFF none repeat scroll 0 0;
            margin: 0 auto;
            padding: 2em;
            text-align: left;
            width: 600px;
        }

        table {
            border: 1px solid #000000;
            border-collapse: collapse;
            caption-side: top;
            width: 100%;
        }

        td,
        th {
            border: 1px solid #000000;
            padding: 0.3em;
            text-align: left;
            vertical-align: top;
            width: 25%;
        }

        caption {
            background: #000000 none repeat scroll 0 0;
            color: #FFFFFF;
            padding: 0.3em;
        }

        th {
            background: #CCCCCC none repeat scroll 0 0;
        }

        td {
            background: #F4F4F4 none repeat scroll 0 0;
        }

        .elements {
            width: 30%;
        }

        .tag {
            width: 15%;
        }

        .purpose {
            width: 55%;
        }

        .odd td {
            background: #FFF none repeat scroll 0 0;
        }

        .even td {
            background: #FFC none repeat scroll 0 0;
        }

        .high td {
            background: rgb(209, 146, 19) none repeat scroll 0 0;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            var target = document.getElementById('stripeTable');
            stripeTable(target, 1);
        }

        function stripeTable(target, fromRow) {
            var rows = target.rows.length;
            for (var i = fromRow; i < rows; i++) {
                if (i % 2 == 0) {
                    target.rows[i].className = "odd";
                }
                else {
                    target.rows[i].className = "even";
                }
            }
        }

        function mouseOver(id) {
            document.getElementById(id).className = "high";
        }

        function mouseOut() {
            var target = document.getElementById('stripeTable');
            stripeTable(target, 1);
        }
    </script>
</head>

<body>
    <div id="page">
        <table width="100%" border="0" id="stripeTable">
            <caption>表格元素解释</caption>
            <tr>
                <th>元素</th>
                <th>标记</th>
                <th>说明</th>
            </tr>
            <tr onmouseover="mouseOver('over1')" onmouseout="mouseOut()" id="over1">
                <td>table</td>
                <td>&lt;table&gt;</td>
                <td>闭合标记</td>
            </tr>
            <tr onmouseover="mouseOver('over2')" onmouseout="mouseOut()" id="over2">
                <td>table row</td>
                <td>&lt;lr&gt;</td>
                <td>表示表格的一行,闭合标记</td>
            </tr>
            <tr onmouseover="mouseOver('over3')" onmouseout="mouseOut()" id="over3">
                <td>table header cell</td>
                <td>&lt;th&gt;</td>
                <td>设置一列的标题</td>
            </tr>
            <tr onmouseover="mouseOver('over4')" onmouseout="mouseOut()" id="over4">
                <td>table data cell</td>
                <td>&lt;td&gt;</td>
                <td>一个包含内容的单元格</td>
            </tr>
            <tr onmouseover="mouseOver('over5')" onmouseout="mouseOut()" id="over5">
                <td>caption</td>
                <td>&lt;caption&gt;</td>
                <td>设置表格标题</td>
            </tr>
        </table>
    </div>
</body>

</html>